import React, { memo, useEffect } from "react"
import "./style.css"
import { useScrollPosition } from "./hooks"

const Home = () => {
    // useEffect(() => {
    //     function handleScroll() {
    //         console.log(window.scrollX, window.scrollY)
    //     }
    //     window.addEventListener("scroll", handleScroll)
    //     return () => {
    //         window.removeEventListener("scroll", handleScroll)
    //     }
    // }, [])

    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

const About = () => {
    const [scrollX, scrollY] = useScrollPosition()
    return (
        <div>
            <h1>
                About {scrollX}-{scrollY}
            </h1>
        </div>
    )
}

const App = memo(() => {
    return (
        <div className="app">
            <h1>App Component</h1>
            <Home />
            <About />
        </div>
    )
})

export default App
